<template>
	<view class="column-div flowChart-view" :style="{'width': width + 'px', 'height': height + 'px'}">
		<view class="flowChart-card" :style="{'width': width - 75 + 'px', 'height': height - 100 + 'px'}">
			<view class="row-end" style="width: 100%;padding: 15px;">
				<uni-icons type="closeempty" size="25upx" color="#EEEEEE"></uni-icons>
			</view>
			<canvas id="flowChart" canvas-id="flowChart" class="flowChart" :style="{'width': width - 75 + 'px', 'height': height - 150 + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				width: null,
				height: null,
				ctx: null,
				canvasView: null,
				entity: {
					rawMaterial: {
						name: '原料供应',
						arr: [],
						element: [
							'五常大米',
							'食用盐',
							'凝固剂',
							'微量元素',
						]
					},
					makeProduct: {
						name: '生产产品',
						arr: [],
						element: [
							'播种',
							'收割',
							'新米'
						]
					},
					retailer: {
						name: '销售商',
						arr: [],
						element: [
							'京东旗舰店',
							'构购商城'
						]
					}
				}
			}
		},
		onLoad() {

		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.width = res.windowWidth
					this.height = res.windowHeight
					console.log(this.width, this.height)
					this.info()
				}
			})

		},
		methods: {
			info() {
				this.ctx = uni.createCanvasContext('flowChart', this);
				// #ifdef H5  
				this.canvasView = document.querySelector('.flowChart > canvas')
				this.canvasView.width = (this.width - 75) * 2
				this.canvasView.height = (this.height - 150) * 2
				// #endif
				let list = []
				let tList = []
				Object.keys(this.entity).forEach((key, i) => {
					let entity = this.entity[key];
					let arr = []
					entity.element.forEach((item, index) => {
						arr.push(this.createRect(i ? index + 1 : index, item, i != 0 ? list[list.length - 1].line.x : 0))
					});
					tList.push(this.verticalLine(arr, entity.name))
					list = arr;
				})
				// 0: {x: 95, y: 72.5}
				// 1: {x: 95, y: 225}
				// 2: {x: 95, y: 337.5}
				console.log(tList)
				tList.forEach((item, index) => {
					if (index == tList.length - 1) return;
					this.ctx.beginPath();
					this.ctx.setLineWidth(0.2)
					this.ctx.setLineDash([10, 10]);
					this.ctx.moveTo(item.x - 20, item.y + 20);
					this.ctx.lineTo(tList[index + 1].x- 20, tList[index + 1].y - 20);
					this.ctx.stroke();
					this.ctx.save();
					this.createArrows(tList[index + 1].x- 20, tList[index + 1].y- 20)
				})
				this.ctx.draw()
			},
			createArrows(x, y) {
				let ctx = this.ctx
				ctx.beginPath();
				// let x = 75;
				// let y = 205
				ctx.setLineDash([0, 0]);
				ctx.moveTo(x + 5, y);
				ctx.lineTo(x - 5, y);
				ctx.lineTo(x, y  +5);
				ctx.closePath();
				ctx.stroke();
				ctx.fillStyle = '#EEEEEE'
				ctx.fill();
				ctx.save();
			},
			verticalLine(arr, text) {
				if (!arr && !arr.length) return
				let y = arr[0].line.y
				let start = arr[0].line.x;
				let end = arr[arr.length - 1].line.x;
				let fontSize = 13
				let ctx = this.ctx
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(y, start);
				ctx.lineTo(y, end);
				ctx.stroke();
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(y, (start + end) / 2);
				ctx.lineTo(y - 20, (start + end) / 2);
				ctx.stroke();
				ctx.save();
				ctx.setFontSize(fontSize)
				ctx.setFillStyle("#333333")
				let tx = (start + end) / 2 + 3
				let ty = y - 25 - text.length * fontSize
				ctx.fillText(text, ty, tx)
				return {
					x: y - 20,
					y: (start + end) / 2
				}
			},
			createRect(index, text, height) {
				let ctx = this.ctx
				let rWidth = 80;
				let rHeight = 25;
				let rleft = this.width - 240
				let rtop = (40 * index) + (height || 0)
				let fontSize = 12
				let textLeft = (rWidth - text.length * fontSize) / 2
				let textheight = rHeight - 8
				let lineArr = []
				ctx.save();
				ctx.setFillStyle("#EEEEEE")
				ctx.fillRect(rleft, rtop, rWidth, rHeight)
				ctx.save();
				ctx.beginPath();
				ctx.setLineWidth(0.2)
				ctx.moveTo(rleft, rHeight / 2 + rtop);
				ctx.lineTo(rleft - 20, rHeight / 2 + rtop);
				ctx.stroke();
				ctx.save();
				ctx.setFontSize(fontSize)
				ctx.setFillStyle("#666666")
				ctx.fillText(text, textLeft + rleft, textheight + rtop)
				return {
					line: {
						y: rleft - 20,
						x: rHeight / 2 + rtop
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.flowChart-view {
		position: fixed;
		z-index: 99;
		background: rgba(0, 0, 0, 0.5);

		.flowChart-card {
			background: #FFFFFF;
			border-radius: 16upx;
		}
	}
</style>
